<template>
  <div>
    <!--表头分页查询，shadow="never" 指定card卡片组件没有阴影    -->
    <el-card shadow="never" class="mb-5">
      <div class="flex items-center">
        <el-text>标签名称</el-text>
        <div class="ml-3 w-52 mr-5">
          <el-input v-model="searchTagName" placeholder="请输入分类"/>
        </div>
        <el-text>创建日期</el-text>
        <div class="ml-3 w-30 mr-5">
          <el-date-picker v-model="pickDate" type="daterange" range-separator="至" start-placeholder="开始时间"
                          end-placeholder="结束时间" :shortcuts="shortcuts"  size="default" @change="datepickerChange"></el-date-picker>
        </div>
        <el-button type="primary" class="ml-3" :icon="Search"  @click="getTableData">查询</el-button>
        <el-button type="primary" class="ml-3" :icon="RefreshRight" @click="reset">重置</el-button>
      </div>
    </el-card>

    <el-card shadow="never">
      <div class="mb-5">
        <el-button type="primary" class="mb-1" @click="addCategoryBtnClick">
          <el-icon class="mr-1 ">
            <Plus/>
          </el-icon>
          新增
        </el-button>

        <el-table :data="tableData" border stripe style="width: 100%" v-loading="tableLoading">
          <el-table-column prop="name" label="标签名称" width="180">
            <template #default="scope">
              <el-tag class="ml-2" type="success">{{scope.row.name}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="creatTime" label="创建时间" width="180"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="danger" size="small" @click="deleteCateGorySubmit(scope.row)">
                <el-icon class="mr-1"><Delete/></el-icon>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="mt-10 flex justify-center">
          <el-pagination  v-model:current-page="current" v-model:page-size="size" :page-sizes="[10, 20, 50]"
                          :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper"
                          :total="total" @size-change="handleSizeChange" @current-change="getTableData"
          />
        </div>
      </div>
    </el-card>

    <!--    <el-dialog v-model="dialogVisible" title="添加文章分类" width="40%" :draggable="true" :close-on-click-modal="false" :close-on-press-escape="false">
          <el-form ref="formRef" :rules="rules" :model="form">
            <el-form-item label="分类名称" prop="name" label-width="120px">
              <el-input size="large" v-model="form.name" placeholder="请输入类名" maxlength="20" show-word-limit clearable></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">
                        提交
                    </el-button>
                </span>
          </template>
        </el-dialog>-->
    <FormDialog ref="formDialogRef" title="添加文章标签" destory-on-close @submit="onSubmit">
      <el-form ref="formRef"  :model="form">
        <el-form-item   prop="name">
          <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" closable :disable-transitions="false" @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <span class="w-20">
             <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-1 w-20" size="small" @keyup.enter="handleInputConfirm"
                       @blur="handleInputConfirm"/>
         <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
           +新增标签
         </el-button>
          </span>

        </el-form-item>
      </el-form>
    </FormDialog>

  </div>
</template>
<script setup>
import {Search, RefreshRight, Plus, Delete} from "@element-plus/icons-vue";
import {ref,reactive,nextTick} from "vue";
import moment from "moment";
import { getTagPageList,addTag,deleteTag} from "@/api/admin/tag.js";
import {showMessage,showModel} from "@/composables/utils.js";

import FormDialog from "@/components/FormDialog.vue";
//分页查询分类名称
const searchTagName = ref('')
const pickDate = ref('')
//时间
const startDate = reactive({})
const endDate = reactive({})
const datepickerChange= (e)=>{
  startDate.value = moment(e[0]).format('YYYY-MM-DD')
  endDate.value = moment(e[1]).format('YYYY-MM-DD')
  console.log('开始时间：'+startDate.value +",结束时间："+endDate.value)
}
const shortcuts = [
  {
    text:'最近一周',
    value:()=>{
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600*1000*24*7)
      return [start, end]
    }
  },
  {
    text:'最近一个月',
    value:()=>{
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600*1000*24*30)
      return [start, end]
    }
  },
  {
    text:'最近一周',
    value:()=>{
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600*1000*24*90)
      return [start, end]
    }
  }

]

const tableData = ref([])

//分页数据
const current = ref(1)
const total = ref(0)
const size = ref(10)
//加载loading
const tableLoading = ref(false)
//分页查询
function getTableData(){
  tableLoading.value = true
  getTagPageList({current: current.value, size: size.value,
    startDate: startDate.value, endDate: endDate.value, name: searchTagName.value})
      .then((res)=>{
        console.log('当前值为',res.data)
        if(res.success === true){
          tableData.value = reactive(res.data)
          current.value = res.current
          total.value = res.total
          size.value = res.size
        }
      }).finally(()=>{
    tableLoading.value= false
  })
}
getTableData()

const handleSizeChange= (chooseSize)=>{
  size.value = chooseSize
  getTableData()
}
const reset =()=>{
  searchTagName.value = ''
  pickDate.value = ''
  startDate.value = null
  endDate.value = null
}

//添加弹出层
const inputValue = ref('')
const dynamicTags = ref([])
const inputVisible = ref(false)
const  InputRef =ref('')
const handleClose = (tag)=>{
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag),1)
}
const showInput=()=>{
  inputVisible.value = true
  nextTick(()=>{
    InputRef.value.input.focus()
  })
}

const handleInputConfirm=()=>{
  if(inputValue.value){
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false

  inputValue.value = ''
}

//const  dialogVisible= ref(false)
const formDialogRef = ref(null)

const addCategoryBtnClick = () => {
  formDialogRef.value.open()
}
const formRef = ref(null)
const form = reactive({
  tags: []
})


const onSubmit= ()=>{
 formRef.value.validate(valid => {
    formDialogRef.value.showBtnLoading()
   form.tags = dynamicTags.value
    addTag(form).then((res)=>{
      if(res.success === true){
        showMessage('添加成功')
        form.tags = []
        dynamicTags.value = []
        formDialogRef.value.close()
        getTableData()
      }else {
        let  message= res.message
        showMessage(message,'error')
      }
    }).finally(()=>{
      formDialogRef.value.closeBtnLoading()
    })
  })

}
const deleteCateGorySubmit =(row)=>{
  showModel('是否确定删除该标签？').then(()=>{
    deleteTag(row.id).then((res)=>{
      if(res.success === true){
        showMessage('删除成功')
        getTableData()
      }else {
        let  message= res.message
        showMessage(message,'error')
      }

    })
  })
}
</script>
<style scoped>

</style>
